<template>
  <div>
    <div>{{ msg }}</div>
    <button @click="msg += 1">Msg加1</button>
  </div>
</template>
<script>
export default {
  beforeCreate() {
    console.log("beforeCreate", "msg");
  },
  created() {
    console.log("created", "msg");
  },
};
</script>
<script setup>
import { onDeactivated } from "vue";
console.log("setup", "msg");
const msg = ref("Msg");
onBeforeMount(() => {
  console.log("onBeforeMount", "msg");
});
onMounted(() => {
  console.log("onMounted", "msg");
});
onBeforeUpdate(() => {
  console.log("onBeforeUpdate", "msg");
});
onUpdated(() => {
  console.log("oneUpdated", "msg");
});
onBeforeUnmount(() => {
  console.log("onBeforeUnmount", "msg");
});
onUnmounted(() => {
  console.log("onUnmounted", "msg");
});
onActivated(() => {
  console.log("onActivated", "msg");
});
onDeactivated(() => {
  console.log("onDeactivated", "msg");
});
</script>

<style lang="scss" scoped></style>
